<template>
  <div>
    <div>
      <el-button type="primary" @click="addEdit('add')"><i class="iconfont icon-plus"></i>添加</el-button>
    </div>
    <div>
      <el-table
        :data="mainList"
        stripe
        style="width: 100%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          prop="user_name"
          label="用户名"
        >
        </el-table-column>
        <el-table-column
          prop="mobilenum"
          label="账号"
        >
        </el-table-column>
        <el-table-column
          prop="role_name"
          label="角色"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          width="150">
          <template slot-scope="scope">
            <el-button type="text" @click="addEdit('edit', scope.row)"><i class="iconfont icon-edit"></i>编辑</el-button>
            <el-button type="text" @click="del(scope.row)"><i class="iconfont icon-del"></i>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagecon"
        background
        layout="total, sizes, prev, pager, next"
        @current-change="_mainList"
        @size-change="_mainList"
        :page-size.sync="page.limit"
        :page-sizes="pageSizeArr"
        :current-page.sync="page.page"
        :total="page.total">
      </el-pagination>
    </div>
    <!-- // 添加编辑角色 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" @close="initData">
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="用户名" label-width="120px" prop="user_name">
          <el-input placeholder="请输入" v-model="form.user_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="头像" label-width="120px">
          <upimg :imgs.sync="imgs" :ismultiple="false"/>
        </el-form-item>
        <el-form-item label="账号" label-width="120px" prop="mobilenum">
          <el-input placeholder="请输入" v-model="form.mobilenum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="120px" :prop="dialogMode==='add' ? 'password' : ''">
          <el-input placeholder="请输入" type="password" v-model="form.password" show-password autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码"  label-width="120px" :prop="dialogMode==='add' ? 'password2' : ''">
          <el-input placeholder="请输入" type="password" v-model="form.password2" show-password autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色" label-width="120px" >
          <el-radio-group v-model="form.myroles">
            <el-radio v-for="item in roleList" :key="item.role_id" :label="item.role_id">{{item.role_name}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="doAction">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getSysUserList, addOrEditAdm, delAdm} from 'api/administratorManagement'
import {getRolerList} from 'api/RoleAuthorityManagement'
import { pageSizeArr } from 'common/config/constConfig'
import upimg from 'components/upimg/upimg'

export default {
  components: {
    upimg
  },
  computed: {
    dialogTitle(){
      if(this.dialogMode === 'add'){
        return '添加管理员'
      }else{
        return '编辑管理员'
      }
    }
  },
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      pageSizeArr,
      rules: {
        user_name: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        mobilenum: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        password2: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur' }
        ]
      },
      mainList: [],
      roleList: [],
      form: {},
      imgs: [],
      page: {
        total: 0,
        page: 1,
        limit: 10
      },
      dialogMode: 'add',
      dialogFormVisible: false
    }
  },
  methods: {
    del(row){
      this.$confirm('是否确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this._delAdm(row)
      })
    },
    _delAdm(row){
      delAdm(row.user_id).then(res => {
        this.$message({
          message: res.rMsg,
          type: 'success'
        })
        this._caozuoAfter()
      })
    },
    addEdit(type, row){
      this.dialogMode = type
      this.dialogFormVisible = true
      if(row){
        let data = JSON.parse(JSON.stringify(row))
        data.myroles = ''
        this.form = data
        console.log(this.form)
        this.imgs = [this.form.user_head_img]
        this.form.myroles = this.form.role_id
      }
    },
    doAction(){
      this.$refs['form'].validate().then(() => {
        let sendData = this.form
        sendData.roles = this.form.myroles ? [this.form.myroles] : []
        if(this.imgs[0]){
          sendData.user_head_img = this.imgs[0]
        }
        if(this.form.password !== this.form.password2){
          this.$message({
            message: '两次密码不一致',
            type: 'error'
          })
          return
        }
        addOrEditAdm(sendData).then(res => {
          if(res){
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this._caozuoAfter()
          }
        })
      })
    },
    _caozuoAfter(){
      this.dialogFormVisible = false
      this.page.page = 1
      this._mainList()
    },
    initData(){
      this.form = {}
      this.imgs = []
    },
    _mainList(){
      let data = {}
      data.pageInfo = {...this.page}
      getSysUserList(data).then(res => {
        this.page.total = res.pageInfo.Total
        this.page.page = res.pageInfo.page
        this.mainList = res.rData
      })
    },
    _mainList2(){
      getRolerList().then(res => {
        this.roleList = res.rData
      })
    }
  },
  created(){
    this._mainList()
    this._mainList2()
  }
}
</script>